.traffic{
    display: flex;
}
.traffic-left{
    flex: 2;
    height: 92vh;
    // background-color: rgb(80, 58, 206);
    .people-flow{
        padding: 7%;
        width: 100%;
        height: 45%;
        background-color: red;
        background-image: url('../asset//pic/bg.png');
        background-size:  100% 100%;
        .flow-data{
            position: relative;
            background-image: url('../asset/pic/border.png');
            background-size: 100% 100%;
            background-color: red;
            width: 100%;
            height: 90%;
            .flow-title{
                position: absolute;
                font-size: 1vw;
                left: 50%;
                transform: translateX(-55%);
                margin: 0 auto;
                color: white;
                font-weight: bolder;
            }
            .now-flow{
                position: absolute;
                font-size: 1vw;
                left: 25%;
                top: 14%;
                transform: translateX(-55%);
                margin: 0 auto;
                color: white;
                width: 33%;
                text-align: center;
                font-weight: bold;
            }
            .now-flow-number{
                position: absolute;
                font-size: 1vw;
                left: 25%;
                top: 30%;
                transform: translateX(-55%);
                margin: 0 auto;
                color: aqua;
                width: 33%;
                text-align: center;
                font-weight: bolder;
            }
            .today-flow{
                position: absolute;
                font-size: 1vw;
                right: -10%;
                top: 14%;
                transform: translateX(-55%);
                margin: 0 auto;
                color: white;
                width: 33%;
                text-align: center;
                font-weight: bolder;
            }
            .today-flow-number{
                position: absolute;
                font-size: 1vw;
                right: 5%;
                top: 30%;
                margin: 0 auto;
                color: aqua;
                width: 43%;
                text-align: center;
                font-weight: bolder;
            }
            .history-flow{
                position: absolute;
                font-size: 1vw;
                right: -10%;
                bottom: 30%;
                transform: translateX(-55%);
                color: white;
                width: 33%;
                text-align: center;
                font-weight: bolder;
            }
            .history-flow-number{
                position: absolute;
                width: 33%;
                text-align: center;
                font-size: 1vw;
                right: 10%;
                bottom: 14%;
                margin: 0 auto;
                color: aqua;
                font-weight: bolder;
            }
            .member-flow{
                position: absolute;
                font-size: 1vw;
                left: 25%;
                bottom: 30%;
                transform: translateX(-55%);
                color: white;
                width: 33%;
                text-align: center;
                font-weight: bolder;
            }
            .member-flow-number{
                position: absolute;
                font-size: 1vw;
                font-weight: bolder;
                left: 25%;
                bottom: 14%;
                transform: translateX(-55%);
                margin: 0 auto;
                color: aqua;
                width: 33%;
                text-align: center;
            }
        }
        
    }
    .line-chart{
        padding: 10%;
        width: 100%;
        height: 55%;
        background-image: url('../asset//pic/bg.png');
        background-size:  100% 100%;
    }
    
}
.traffic-center{
    position: relative;
    flex: 4;
    // background-color: aqua;
    .traffic-center-map{
        height: 60%;
        // background-color: red;
    }
    .map-serach{
        position: absolute;
        right: 0px;
        width: 17vw;
        height: 3vw;
        background-image: url('../asset/pic/input.png');
        background-size: 18vw 3vw;
        z-index: 1;
        .serach-input{
            position:absolute;
            background-color: transparent;
            border: transparent;
            color: aqua;
            text-indent: 1vw;
            height: 4vh;
            top: 1vh;
            outline:none; 
        }
        .serach-button{
            cursor: pointer;
            position: absolute;
            text-align: center;
            line-height:  3vw;
            right: 0;
            width: 80px;
            height:  3vw;
            color:aqua;
            background-color: transparent;
            outline: none;
            border: none;
        }
        .serach-button option{
            color: aqua;
            background-color: rgb(17,51,51)!important;
        }
        
    }
    .time-line-chart{
        padding: 1.5rem;
        background-image: url('../asset//pic/bg.png');
        background-size:  100% 100%;
        height: 40%;
        width: 100%;
        // background-color: red;
    }
}
.traffic-right{
    flex: 2;
    background-color: rgb(4, 196, 30);
    .traffict-table{
        // position: absolute;
        bottom: 0;
        padding: 10px;
        width: 100%;
        height: 30%;
        background-image: url('../asset//pic/bg.png');
        background-size:  100% 100%;
        z-index: 999;
    }
    .traffic-rate{
        padding: 10px;
        height: 30%;
    }
    .traffic-rader{
        padding: 10%;
        height: 40%;
    }
    .traffic-table{
        padding: 10%;
        table{
            width: 100%;
            border-collapse: collapse;
            border-spacing: 0;
            thead {
                tr {
                    background-color: rgb(31,72,110);
                    border: 1px #06c solid;
                    height: 42px;
                    line-height: 42px;
                    cursor: auto;
                }
            }
            tbody{
                tr{
                    border: 1px #06c solid;
                    text-align: center;
                }
            }
        }
    }
}
// popMpdel
.Modal-Main{
    .PopTab{
        display: flex;
        color:white;
        font-size: 1.5vw;
        font-weight: bold;
        border-bottom: 2px solid rgb(0, 162, 255);
        .PopTab-item{
            transition: all .3s linear;
            margin-right: 2vw;
            cursor: pointer;
            border-bottom: 3px solid transparent;
        }
        .PopTab-item:hover{
            border-bottom: 3px solid aqua;
        }
        .PopTab-item-click{
            border-bottom: 3px solid aqua;
        }
    }
    .PopContent{
        display: flex;
        .PopTable{
            flex: 5;
        };
        .PopRight{
            flex: 2;
            // background-color: red;
            .PopRightMap{
                height: 50%;
                // background-color: red;
            }
            .PopRightLine{
                height: 50%;
                // background-color: red;
            }
        }
        #pop_table{
            width: 100%;
            // border-collapse: collapse;
            border-spacing: 0;
            border: 1px #06c solid;
            thead {
                tr {
                    background-color: rgb(31,72,110);
                    border: 1px #06c solid;
                    height: 3vw;
                    line-height: 42px;
                    text-align: center;
                    cursor: auto;
                }
            }
            tbody{
                tr{
                    height: 3vw;
                    background-color: 'red';
                    text-align: center;
                    border: 1px #06c solid;
                }
            }
        
        }
    }
    
}


// common
.ant-modal-body{
    background-color: rgb(11, 13, 15) !important;
}
.ant-typography, .ant-typography a{
    color: aqua !important;
}
table tr:hover{
    cursor: pointer;
    background-color: rgb(48,51,97);
}
.amap-logo{
    display: none;
    opacity: 0 !important;
}

input::-webkit-input-placeholder{
    color:rgb(115, 163, 185)
}
